<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Note List</title>
    <!-- 添加marked.js库用于Markdown解析 -->
    <script src="https://cdn.staticfile.org/marked/4.3.0/marked.min.js"></script>
    <style>
        /* 通用样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .note-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 卡片布局 */
            gap: 20px; /* 卡片之间的间距 */
            padding: 20px;
            margin-bottom: 60px; /* 为底部导航栏留出空间 */
        }
        .note-item {
            display: flex;
            flex-direction: column;
            border-radius: 12px;
            padding: 20px;
            background: #ffffff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .note-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        .note-item .note-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }
        .note-item .note-header span {
            font-weight: 600;
        }
        .note-item .note-content {
            font-size: 16px;
            color: #333;
            line-height: 1.6;
            margin-bottom: 15px;
            font-weight: 500;
            overflow: hidden; /* 防止内容溢出 */
            text-overflow: ellipsis; /* 使用省略号 */
            display: -webkit-box;
            -webkit-line-clamp: 3; /* 限制显示的行数 */
            -webkit-box-orient: vertical;
        }
        .note-item .note-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: auto; /* 将标签固定在卡片底部 */
        }
        .note-item .note-tags span {
            background-color: #007bff;
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease, transform 0.2s ease;
        }
        .note-item .note-tags span:hover {
            background-color: #0056b3;
            transform: scale(1.1);
        }

        /* Web 端顶部导航栏样式 */
        .web-top-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            background-color: #ffffff; /* 白色背景 */
            border-bottom: 1px solid #e0e0e0; /* 底部边框 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
        }
        .web-top-nav .logo {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
        .web-top-nav .logo img {
            height: 24px;
            margin-right: 8px; /* 图标与文字间距 */
        }
        .web-top-nav .search {
            display: flex;
            align-items: center;
            gap: 5px; /* 减少搜索按钮与输入框之间的间距 */
        }
        .web-top-nav .search input {
            width: 0;
            padding: 5px 10px;
            border: 1px solid #ccc;
            border-radius: 20px;
            outline: none;
            font-size: 14px;
            transition: width 0.3s ease;
            opacity: 0;
        }
        .web-top-nav .search input.active {
            width: 200px; /* 展开后的宽度 */
            opacity: 1;
        }
        .web-top-nav .search button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            color: #333;
        }
        .web-top-nav .search button:hover {
            color: #007bff;
        }
        .web-top-nav .links {
            display: flex;
            align-items: center;
            gap: 15px; /* 减少链接之间的间距 */
            margin-left: 10px; /* 调整与搜索框的间距 */
        }
        .web-top-nav .links a {
            display: flex;
            align-items: center;
            gap: 5px; /* 图标与文字之间的间距 */
            text-decoration: none;
            color: #333;
            font-size: 14px;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        .web-top-nav .links a:hover {
            color: #007bff; /* 悬停效果 */
        }
        .web-top-nav .links a .icon {
            font-size: 16px; /* 图标大小 */
        }

        /* App 端顶部导航栏样式 */
        .app-top-nav {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #007bff;
            color: white;
            text-align: center;
            padding: 10px 0;
            z-index: 1000;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .app-top-nav a {
            color: white;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            padding: 5px 10px;
        }
        .app-top-nav a.active {
            border-bottom: 2px solid white;
        }
        .app-top-nav a:hover {
            opacity: 0.8;
        }

        /* 美化底部导航栏 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f8f8f8;
            border-top: 1px solid #ddd;
            padding: 5px 0;
        }
        .bottom-nav a {
            flex: 1;
            text-align: center;
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }
        .bottom-nav a.active {
            color: #007bff;
        }
        .bottom-nav a .icon {
            display: block;
            font-size: 20px;
            margin-bottom: 5px;
        }

        /* Web 端样式 */
        @media (min-width: 768px) {
            .app-top-nav {
                display: none;
            }
            .bottom-nav {
                display: none; /* 隐藏底部导航栏 */
            }
        }

        /* App 端样式 */
        @media (max-width: 767px) {
            .web-top-nav {
                display: none;
            }
            .note-list {
                margin-top: 50px;
                margin-bottom: 60px; /* 为底部导航栏留出空间 */
            }
        }

        .note-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            font-size: 12px;
            color: #888;
            border-top: 1px solid #e0e0e0;
            padding-top: 10px;
        }
        .note-footer span {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .note-footer span i {
            color: #007bff;
        }

        /* 添加按钮样式 */
        .add-button {
            position: fixed;
            bottom: 80px; /* 移动端底部导航栏上方一些 */
            right: 20px;
            width: 60px;
            height: 60px;
            background-color: #007bff;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 1000;
            text-decoration: none;
        }

        .add-button:hover {
            transform: scale(1.1);
            background-color: #0062cc;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }

        /* 让按钮在Web端位置更合适 */
        @media (min-width: 768px) {
            .add-button {
                bottom: 30px;
                right: 30px;
            }
        }
    </style>
</head>
<body>
    <!-- Web 端顶部导航栏 -->
    <div id="header"></div>

    <!-- App 端顶部导航栏 -->
    <div class="app-top-nav">
        <a href="local-notes.html" class="active">本地</a>
        <a href="online-notes.html">在线</a>
        <a href="search.html">搜索</a>
    </div>

    <!-- 笔记列表 -->
    <div class="note-list">
        <!-- Notes will be dynamically rendered here -->
    </div>

    <!-- 添加笔记按钮 -->
    <a href="note-add.html" class="add-button">+</a>

    <!-- 引入底部导航栏 -->
    <div>
        <!-- Include bottom-nav.html content here -->
        <div class="bottom-nav">
            <a href="note-list.html" class="active">
                <span class="icon">🏠</span>
                <span>首页</span>
            </a>
            <a href="messages.html">
                <span class="icon">💬</span>
                <span>消息</span>
            </a>
            <a href="login.html">
                <span class="icon">👤</span>
                <span>个人</span>
            </a>
        </div>
    </div>

    <script>
        // Load shared header
        document.addEventListener("DOMContentLoaded", () => {
            // 配置Marked选项
            marked.setOptions({
                breaks: true,           // 支持GitHub换行符
                gfm: true,              // 启用GitHub风格Markdown
                sanitize: false,        // 不过滤HTML标签
                smartLists: true        // 使用更智能的列表行为
            });
            
            fetch("header.html")
                .then(response => response.text())
                .then(html => {
                    document.getElementById("header").innerHTML = html;

                    // Add event listeners for the search box after the header is loaded
                    const searchButton = document.querySelector('.web-top-nav .search button');
                    const searchInput = document.querySelector('.web-top-nav .search input');

                    if (searchButton && searchInput) {
                        searchButton.addEventListener('click', () => {
                            if (!searchInput.classList.contains('active')) {
                                searchInput.classList.add('active');
                                searchInput.focus();
                            } else {
                                console.log('Searching:', searchInput.value);
                            }
                        });

                        document.addEventListener('click', (e) => {
                            if (!e.target.closest('.search')) {
                                searchInput.classList.remove('active');
                            }
                        });
                    }
                });
        });

        const notes = [
            {
            id: crypto.randomUUID(),
            title: "Work Deadlines",
            content: "🚀 This is the first note. It contains some important information about work and deadlines.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["work", "important", "urgent"]
            },
            {
            id: crypto.randomUUID(),
            title: "Daily Tasks",
            content: "📅 This is the second note. It is a personal reminder for daily tasks and events.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["personal", "reminder", "tasks"]
            },
            {
            id: crypto.randomUUID(),
            title: "学习笔记 - JavaScript",
            content: "# JavaScript基础知识\n\n## 数据类型\nJavaScript有以下基本数据类型：\n- String（字符串）\n- Number（数字）\n- Boolean（布尔）\n- Undefined（未定义）\n- Null（空值）\n- Symbol（符号，ES6新增）\n- BigInt（大整数，ES2020新增）\n\n## 函数定义\n```javascript\n// 函数声明\nfunction add(a, b) {\n  return a + b;\n}\n\n// 箭头函数\nconst multiply = (a, b) => a * b;\n```\n\n> 注意：箭头函数没有自己的this，它继承自父作用域的this。",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["javascript", "编程", "学习"]
            },
            {
            id: crypto.randomUUID(),
            title: "Brainstorming Ideas",
            content: "💡 This is the fourth note. It contains brainstorming ideas for a new app development project.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["ideas", "development", "app"]
            },
            {
            id: crypto.randomUUID(),
            title: "周末购物清单",
            content: "# 周末购物清单\n\n## 食品\n- [ ] 大米 5kg\n- [ ] 面粉 1kg\n- [ ] 鸡蛋 1盒\n- [x] 牛奶 2盒\n\n## 生鲜\n- [ ] 西红柿 5个\n- [ ] 黄瓜 2根\n- [ ] 鸡胸肉 500g\n\n## 日用品\n- [ ] 洗发水\n- [ ] 牙膏\n- [x] 纸巾\n\n## 预算\n| 类别 | 预算 | 实际花费 |\n|------|------|--------|\n| 食品 | ¥150 | |\n| 生鲜 | ¥100 | |\n| 日用品 | ¥80 | |\n| **总计** | **¥330** | |",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["购物", "生活", "计划"]
            },
            {
            id: crypto.randomUUID(),
            title: "Travel Plans",
            content: "✈️ This is the sixth note. It contains travel plans, including flight details, hotel bookings, and itinerary.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["travel", "plans", "itinerary"]
            },
            {
            id: crypto.randomUUID(),
            title: "Book Summary",
            content: "📖 This is the seventh note. It includes a summary of the book I am currently reading and key takeaways.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["reading", "summary", "books"]
            },
            {
            id: crypto.randomUUID(),
            title: "健身计划表",
            content: "# 每周健身计划\n\n## 周一：胸部和肱三头肌\n1. **卧推**：4组，每组10-12次\n2. **哑铃飞鸟**：3组，每组12-15次\n3. **绳索下拉**：3组，每组12-15次\n4. **三头肌伸展**：3组，每组12-15次\n\n## 周二：背部和二头肌\n1. **引体向上**：4组，每组尽可能多次\n2. **坐姿划船**：4组，每组10-12次\n3. **哑铃弯举**：3组，每组12-15次\n\n## 周三：休息或有氧\n- 30分钟慢跑或快走\n- 拉伸和恢复\n\n## 周四：腿部和肩膀\n1. **深蹲**：4组，每组10-12次\n2. **硬拉**：3组，每组10-12次\n3. **肩部推举**：4组，每组10-12次\n\n## 周五：全身\n1. **高强度间歇训练** (HIIT)：20分钟\n2. **核心训练**：3组，每组15-20次\n\n## 营养提示\n> 训练前：碳水化合物为主的轻食\n> 训练后30分钟内：蛋白质和碳水化合物补充\n> 日常：保持高蛋白摄入和充分水分",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["健身", "计划", "锻炼"]
            },
            {
            id: crypto.randomUUID(),
            title: "Creative Projects",
            content: "🎨 This is the ninth note. It contains a list of creative projects, including painting, sketching, and DIY crafts.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["creative", "projects", "art"]
            },
            {
            id: crypto.randomUUID(),
            title: "Meeting Summary",
            content: "📝 This is the tenth note. It is a detailed meeting summary with action items and deadlines for the team.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["meeting", "summary", "action-items"]
            },
            {
            id: crypto.randomUUID(),
            title: "Reflective Journal",
            content: "🌟 This is an eleventh note. It contains a long reflective journal entry about personal growth and achievements over the past year. It discusses challenges faced, lessons learned, and goals for the future. The note is meant to inspire and motivate.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["reflection", "growth", "motivation"]
            },
            {
            id: crypto.randomUUID(),
            title: "Home Office Guide",
            content: "📜 This is a twelfth note. It is a comprehensive guide on how to set up a home office. It includes tips on choosing the right furniture, organizing cables, and creating a productive work environment. The note is detailed and spans multiple paragraphs.",
            createdAt: new Date().toLocaleString(),
            updatedAt: new Date().toLocaleString(),
            tags: ["guide", "home-office", "productivity"]
            }
        ];

        function renderNotes() {
            const noteList = document.querySelector(".note-list");
            noteList.innerHTML = ""; // Clear existing notes

            notes.forEach(note => {
                const noteItem = document.createElement("div");
                noteItem.classList.add("note-item");

                // 从Markdown内容中提取预览
                let contentPreview = "";
                if (note.content.startsWith("#") || note.content.includes("\n")) {
                    // 提取纯文本预览，去除Markdown语法
                    contentPreview = note.content
                        .replace(/#+\s+/g, '') // 移除标题标记
                        .replace(/\*\*|\*|~~|__/g, '') // 移除强调标记
                        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // 移除链接，保留文本
                        .replace(/!\[([^\]]+)\]\([^)]+\)/g, '[图片]') // 替换图片
                        .replace(/```[\s\S]*?```/g, '[代码块]') // 替换代码块
                        .replace(/`([^`]+)`/g, '$1') // 移除行内代码标记
                        .replace(/\n/g, ' ') // 替换换行为空格
                        .substring(0, 150) + (note.content.length > 150 ? '...' : ''); // 裁剪长度
                } else {
                    // 对于简单内容直接显示
                    contentPreview = note.content;
                }

                noteItem.innerHTML = `
                    <h3 class="note-title">${note.title}</h3>
                    <div class="note-content">${contentPreview}</div>
                    <div class="note-tags">
                        ${note.tags.map(tag => `<span>${tag}</span>`).join("")}
                    </div>
                    <div class="note-footer">
                        <span><i class="fas fa-calendar-alt"></i> Created: ${note.createdAt}</span>
                        <span><i class="fas fa-edit"></i> Updated: ${note.updatedAt}</span>
                    </div>
                `;

                // 添加点击事件，跳转到笔记详情页
                noteItem.addEventListener('click', () => {
                    // 将笔记数据保存到localStorage，以便详情页访问
                    localStorage.setItem('selectedNote', JSON.stringify(note));
                    window.location.href = `note-detail.html?id=${note.id}&source=local`;
                });
                
                // 添加鼠标样式，表明可点击
                noteItem.style.cursor = 'pointer';

                noteList.appendChild(noteItem);
            });
        }

        document.addEventListener("DOMContentLoaded", renderNotes);

        document.addEventListener("DOMContentLoaded", () => {
            const localLink = document.querySelector(".links a:nth-child(1)");

            // Prevent reloading the same page when "本地" is clicked
            localLink.addEventListener("click", (e) => {
                e.preventDefault();
            });
        });

        document.addEventListener("DOMContentLoaded", () => {
            const localLink = document.querySelector(".bottom-nav a:nth-child(1)");
            const onlineLink = document.querySelector(".bottom-nav a:nth-child(2)");

            // Ensure elements exist before adding event listeners
            if (localLink) {
                localLink.addEventListener("click", (e) => {
                    e.preventDefault();
                    window.location.href = "local-notes.html";
                });
            }

            if (onlineLink) {
                onlineLink.addEventListener("click", (e) => {
                    e.preventDefault();
                    window.location.href = "online-notes.html";
                });
            }
        });

        document.addEventListener("DOMContentLoaded", () => {
            const localLinkTop = document.querySelector(".links a:nth-child(1)");

            // Ensure the top "本地" link exists before adding event listeners
            if (localLinkTop) {
                localLinkTop.addEventListener("click", (e) => {
                    e.preventDefault();
                });
            }
        });

        document.addEventListener("DOMContentLoaded", () => {
            const messagesLink = document.querySelector(".bottom-nav a:nth-child(2)");

            if (messagesLink) {
                messagesLink.addEventListener("click", (e) => {
                    e.preventDefault();
                    window.location.href = "messages.html";
                });
            }
        });
    </script>
</body>
</html>
